html,body { width: 100%; height: 100%; }
body { background: url(images/login_bg.jpg) no-repeat center; }

.login { position: relative; height: 100%; }
.login .container { position: absolute; left: 50%; top: 50%;/* width: 960px;*/ width:800px; height: 426px; margin: -213px 0 0 -400px; background: rgba(0,0,0,0.6); border-radius: 20px; }
.login .logo,
.login .form{ float: left; }
.login .logo { /*padding: 70px 145px;*/ padding: 70px 65px; margin-top: 55px; border-right: 4px solid rgba(255,255,255,0.5); }

.form { margin: 55px 0 0 70px; }
.form form { background: #000; padding: 20px; }
.form input { width: 300px; box-sizing: border-box; border: 1px solid #fff; background: none; color: #fff; font-size: 16px; padding: 10px 0; border-radius: 2px; }
.form .ipt::-webkit-input-placeholder { color: #fff; }
.form .ipt::-moz-input-placeholder { color: #fff; }
.form .ipt::-ms-input-placeholder { color: #fff; }
.form .pwd { margin: 25px 0; }
.form .account .ipt { padding-left: 60px; background: url(images/form_icon_account.png) no-repeat 20px center; }
.form .account,
.form .pwd,
.form .code { position: relative; }
.form .account label,
.form .pwd label,
.form .code label { position: absolute; display: block; color: #ff0000; font-size: 12px; margin-top: 2px; }
.form .code label { margin-top: 45px; }
.form .pwd .ipt { padding-left: 60px; background: url(images/form_icon_pwd.png) no-repeat 20px center; }
.form .code .ipt { padding-left: 60px; background: url(images/find_icon_code2.png) no-repeat 17px center; background-size: 28px; }


.form .code { margin-bottom: 30px; }
.form .code .ipt { width: 170px; text-align: center; float: left; }
.form .code .pic { width: 120px; height: 38px; float: right; border-radius: 2px; color: #fff; border: 1px solid #fff; }
.form .code .pic img { display: inline-block; margin: 8px 0 0 5px; vertical-align: bottom }
.form .btn { height: 50px; background: #ff0000; cursor: pointer; border-radius: 2px; color: #fff; text-align: center; font-size: 20px; border: none; }

.form .btn:hover { background: #d00d0d; }

.form .link  { text-align: right; padding-right: 20px; margin-top: 10px; }
.form .link a { display: inline-block; color: #fff; text-decoration: underline; font-size: 12px; margin-left: 10px; }
.form .link a:hover { color: #ff0000; }

/*找回密码*/
#findpwdContainer { transform: scale(0); opacity: 0; transition: all 0.3s; position: absolute; z-index: 999; left: 50%; top: 50%; margin-left: -250px; margin-top: -228px; width: 500px; height: 456px; background: #fff; }
#findpwdContainer.on { display: block; opacity: 1; transform: scale(1); }
#findpwdContainer .title { position: relative; background: #f6f6f6; padding: 10px 20px; font-size: 16px; font-weight: bold; }
#findpwdContainer .title .findClose { display: inline-block; position: absolute; right: 0; top: 0; width: 40px; height: 40px; background: url(images/find_icon_close.png) no-repeat center; cursor: pointer; }

#findpwdContainer .content { padding: 25px 0 0 100px; }
#findForm {width: 300px;  }
#findForm input { width: 300px; box-sizing: border-box; border: 1px solid #ddd; background: none; color: #333; font-size: 16px; padding: 10px 0; border-radius: 2px; }
#findForm .account,
#findForm .phone,
#findForm .code,
#findForm .password1,
#findForm .password2 { margin-bottom: 25px; }
#findForm .account .ipt { padding-left: 60px; background: url(images/find_icon_account.png) no-repeat 20px center; }
#findForm .phone .ipt { padding-left: 60px; background: url(images/find_icon_phone.png) no-repeat 23px center; }
#findForm .code .ipt { padding-left: 60px; background: url(images/find_icon_code.png) no-repeat 20px center; }

#findForm .code .ipt { width: 170px; text-align: center; float: left; }
#findForm .code .send { width: 120px; height: 40px; cursor: pointer; padding: 0; text-align: center; border-radius: 2px; float: right; color: #fff; background: #ff0000; }
#findForm .code .send.gray { background: #ddd; color: #a2a2a2; }
#findForm .password1 .ipt,
#findForm .password2 .ipt { padding-left: 60px; background: url(images/find_icon_password.png) no-repeat 20px center; }
#findForm .ipt::-webkit-input-placeholder { color: #949393; }
#findForm .ipt::-moz-input-placeholder { color: #949393; }
#findForm .ipt::-ms-input-placeholder { color: #949393; }

#findForm .btn input { float: left; width: 120px; background: #ff0000; border: none; color: #fff; cursor: pointer; }
#findForm #findConfirm { float: left; }
#findForm #findCancel { float: right; background: #ededed; color: #676767; }
#findForm .account label,
#findForm .phone label,
#findForm .pwd label,
#findForm .code label,
#findForm .password1 label,
#findForm .password2 label { position: absolute; display: block; color: #ff0000; font-size: 12px; margin-top: 2px; }
#findForm .code label { margin-top: 45px; }


/*注册*/
#regContainer { transform: scale(0); opacity: 0; transition: all 0.3s; position: absolute; z-index: 999; left: 50%; top: 50%; margin-left: -250px; margin-top: -265px; width: 500px; height: 530px; background: #fff; }
#regContainer.on { display: block; opacity: 1; transform: scale(1); }
#regContainer .title { position: relative; background: #f6f6f6; padding: 10px 20px; font-size: 16px; font-weight: bold; }
#regContainer .title .regClose { display: inline-block; position: absolute; right: 0; top: 0; width: 40px; height: 40px; background: url(images/find_icon_close.png) no-repeat center; cursor: pointer; }

#regContainer .content { padding: 25px 0 0 100px; }
#regForm {width: 300px;  }
#regForm input { width: 300px; box-sizing: border-box; border: 1px solid #ddd; background: none; color: #333; font-size: 16px; padding: 10px 0; border-radius: 2px; }
#regForm input.vali_error { border-color: #ff0000; }
#regForm input.vali_success { border-color: #48a516; }
#regForm .account,
#regForm .phone,
#regForm .wx,
#regForm .code,
#regForm .password1,
#regForm .password2 { margin-bottom: 25px; }
#regForm .account .ipt { padding-left: 60px; background: url(images/find_icon_account.png) no-repeat 20px center; }
#regForm .phone .ipt { padding-left: 60px; background: url(images/find_icon_phone.png) no-repeat 23px center; }
#regForm .wx .ipt { padding-left: 60px; background: url(images/find_icon_phone.png) no-repeat 23px center; }
#regForm .code .ipt { padding-left: 60px; background: url(images/find_icon_code.png) no-repeat 20px center; }
#regForm .wx .ipt { padding-left: 60px; background: url(images/find_icon_wx2.png) no-repeat 20px center; background-size: 25px;  }

#regForm .code .ipt { width: 170px; text-align: center; float: left; }
#regForm .code .send { width: 120px; height: 40px; cursor: pointer; padding: 0; text-align: center; border-radius: 2px; float: right; color: #fff; background: #ff0000; }
#regForm .code .send.gray { background: #ddd; color: #a2a2a2; }
#regForm .password1 .ipt,
#regForm .password2 .ipt { padding-left: 60px; background: url(images/find_icon_password.png) no-repeat 20px center; }
#regForm .ipt::-webkit-input-placeholder { color: #949393; }
#regForm .ipt::-moz-input-placeholder { color: #949393; }
#regForm .ipt::-ms-input-placeholder { color: #949393; }

#regForm .btn input { float: left; width: 120px; background: #ff0000; border: none; color: #fff; cursor: pointer; }
#regForm #regConfirm { float: left; }
#regForm #regCancel { float: right; background: #ededed; color: #676767; }
#regForm .account label,
#regForm .phone label,
#regForm .pwd label,
#regForm .wx label,
#regForm .code label,
#regForm .password1 label,
#regForm .password2 label { position: absolute; display: block; color: #ff0000; font-size: 12px; margin-top: 2px; }
#regForm .code label { margin-top: 45px; }

/*mask*/
.mask { display: none; position: fixed; z-index: 998 width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); }